import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { Dispatch } from 'redux'
import { getHomeDataAction } from '../../store/actionCreators'
import { HomeWrapper } from './style'
// import { Home } from '../../models/home'
import { rootState } from '../../store'
import  TabBar  from '../../components/TabBar'
import Header from '../../components/Header'

interface HomeProps {
    tabBar:any[];
    banners:any[];
  getHomeDataActionDispatch: () => void;
}

const Home : React.FC<HomeProps> = (props) => {
  const {
    tabBar,
    banners
  } = props
  const {
    getHomeDataActionDispatch
  } = props
 
  useEffect(()=>{
    getHomeDataActionDispatch()
},[])

  
  return (
    <HomeWrapper >
      <Header banners={banners}/>
      <TabBar TabBar={tabBar}/>
    </HomeWrapper>
  )
}

const mapStateToProps = (state :rootState) => ({

  tabBar: state.ranking.tabBarData,
  banners:state.ranking.bannersData

})

const mapDispatchToProps = (dispatch :Dispatch) => ({
  getHomeDataActionDispatch() {
    dispatch(getHomeDataAction())
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Home)